<template>

	<view class="container">
		<image class="bg-img" mode="widthFix" style="width: 100%; height: 100%;" src="../../static/zml/zml.png"></image>
		<div class="avatar">
			<div class="img1">
				<image :src="one.avatar" mode="scaleToFill"></image>
				<div class="img1q">
					<image src="../../static/zml/q1.png" mode="scaleToFill"></image>
				</div>
				<div class="img2q">
					<image src="../../static/zml/1@3x.png" mode="scaleToFill"></image>
				</div>
				<div class="li">
					<div class="name">{{one.name}}</div>
					<div class="text">共计{{totalPeople(one.amountCont)}}笔,预计获得</div>
					<div class="money">{{ one.amountCont | formatDecimal}}元</div>
				</div>
			</div>
			<div class="img2">
				<image :src="two.avatar" mode="scaleToFill"></image>
				<div class="img2q">
					<image src="../../static/zml/3@3x.png" mode="scaleToFill"></image>
				</div>
				<div class="li">
					<div class="name">{{two.name}}</div>
					<div class="text">共计{{totalPeople(two.amountCont)}}笔,预计获得</div>
					<div class="money">{{ two.amountCont | formatDecimal}}元</div>
				</div>
			</div>
			<div class="img3">
				<image :src="three.avatar" mode="scaleToFill"></image>
				<div class="img2q">
					<image src="../../static/zml/2@3x.png" mode="scaleToFill"></image>
				</div>
				<div class="li">
					<div class="name">{{three.name}}</div>
					<div class="text">共计{{totalPeople(three.amountCont)}}笔,预计获得</div>
					<div class="money">{{ three.amountCont | formatDecimal}}元</div>
				</div>
			</div>
		</div>
		<div class="btn" @click="onPlaybill()">点击升级合伙人</div>
	</view>
</template>

<script>
	import Api from "../../API/api";
	export default {
		data() {
			return {
				one: {
					name: "暂无",
					avatar: "../../static/zml/avatar.png",
					amountCont: 0.00
				},
				two: {
					name: "暂无",
					avatar: "../../static/zml/avatar.png",
					amountCont: 0.00
				},
				three: {
					name: "暂无",
					avatar: "../../static/zml/avatar.png",
					amountCont: 0.00
				}
			}
		},
		filters: {
			formatDecimal(value) {
				// 将值转换为 Number 类型，然后使用 toFixed 方法将其格式化为带有两位小数的字符串
				return Number(value).toFixed(2);
			},
		},

		onLoad() {
			Api.getLeaderboard().then(res => {
				if (res.data.ranking[0]) {
					this.one = res.data.ranking[0]
				}
				if (res.data.ranking[2]) {
					this.two = res.data.ranking[1];
				}
				if (res.data.ranking[1]) {
					this.three = res.data.ranking[2];
				}
			})
		},
		methods: {
			onPlaybill() {
				uni.navigateTo({
					url: '/pages/index/my_poster'
				})
			},
			totalPeople(imt) {
				return Math.ceil(imt / 100);
			}
		}
	}
</script>

<style lang="less">
	.container {
		position: relative;
		width: 100%;
		height: 100%;
	}

	//头像
	.avatar {
		.img1 {
			position: absolute;
			bottom: 230px;
			left: 50%;
			transform: translateX(-50%);

			image {
				z-index: 1;
				width: 85px;
				height: 85px;
				border-radius: 50%;
			}

			.img1q {
				position: absolute;
				bottom: -2.7px;
				left: 59%;
				transform: translateX(-50%);

				image {
					width: 98px;
					height: 99px;
					border-radius: 50%;
				}
			}

			.img2q {
				z-index: 100;
				position: absolute;
				bottom: -2.7px;
				left: 90%;
				transform: translateX(-50%);

				image {
					width: 30px;
					height: 30px;
					// border-radius: 50%;
				}
			}

			.li {
				position: absolute;
				width: 100px;
				text-align: center;
				right: -10%;

				.name {
					font-weight: 700;
					margin-top: 20rpx;
				}

				.text {
					color: #aaa;
					font-size: 18rpx;
					margin-top: 5rpx;
				}

				.money {
					font-size: 36rpx;
					font-weight: bold;
					color: #FD9509;
				}
			}

		}

		.img2 {
			position: absolute;
			bottom: 229.1px;
			left: 74.5%;
			transform: translateX(-50%);

			image {
				width: 65px;
				height: 65px;
				border-radius: 50%;
			}

			.img2q {
				z-index: 100;
				position: absolute;
				bottom: -2.7px;
				left: 80%;
				transform: translateX(-50%);

				image {
					width: 20px;
					height: 20px;
					// border-radius: 50%;
				}
			}

			.li {
				position: absolute;
				width: 100px;
				text-align: center;
				right: -30%;

				.name {
					font-weight: 700;
					margin-top: 20rpx;
				}

				.text {
					color: #aaa;
					font-size: 18rpx;
					margin-top: 5rpx;
				}

				.money {
					font-size: 36rpx;
					font-weight: bold;
					color: #FD9509;
				}
			}
		}

		.img3 {
			position: absolute;
			bottom: 230px;
			left: 25%;
			transform: translateX(-50%);

			image {
				width: 65px;
				height: 65px;
				border-radius: 50%;
			}

			.img2q {
				z-index: 100;
				position: absolute;
				bottom: -2.7px;
				left: 80%;
				transform: translateX(-50%);

				image {
					width: 20px;
					height: 20px;
					// border-radius: 50%;
				}
			}

			.li {
				position: absolute;
				width: 100px;
				text-align: center;
				right: -30%;

				.name {
					font-weight: 700;
					margin-top: 20rpx;
				}

				.text {
					color: #aaa;
					font-size: 18rpx;
					margin-top: 5rpx;
				}

				.money {
					font-size: 36rpx;
					font-weight: bold;
					color: #FD9509;
				}
			}
		}
	}

	.btn {
		width: 520rpx;
		height: 96rpx;
		background: linear-gradient(180deg, #FFBE00FF 0%, #FFC200FF 100%);
		border-radius: 48rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		color: #FFFFFF;
	}
</style>